<template>
  <div class="make-invoice">
    <a-spin :spinning="loading">
      <!-- 基础信息 -->
      <div class="header">
        <a-button style="margin-bottom: 12px" type="primary" size="small" @click="importInvoiceHandle">导入发票</a-button>
        <a-row :gutter="16">
          <!--  -->
          <a-col v-for="(item, index) in baseFormCloumn" :key="index" :span="6">
            <div :class="['header-item', ['waybillNum'].includes(item.field) ? 'main-color' : '']">
              <label for="#">{{ item.label }}: </label>
              <span>{{ waybillInfo[item.field] }}</span>
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- 收件地址信息 -->
      <a-form class="tbody" :model="formState" ref="formDataRef" name="basic" :label-col="{ style: 'width:100px' }" :wrapper-col="{ style: 'calc(100% - 100px)' }" autocomplete="off">
        <div class="address-info">
          <div class="title">收件地址信息</div>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="运单类型" name="addressType" :rules="[{ required: true, message: '请选择运单类型!' }]">
                <a-radio-group v-model:value="formState.addressType" name="radioGroup" @change="changeAddressTypeHandle">
                  <a-radio v-for="(item, index) in dataDict['WAYBILL_TYPE']" :key="index" :value="item.code">{{ item.name }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="邮编" name="zipCode" :rules="[{ required: true, message: '请填写邮编!' }]">
                <a-input v-model:value="formState.zipCode" placeholder="请填写邮编" @keydow="validateZhInputHandle($event, formState, ['zipCode'])" :maxlength="20"></a-input>
              </a-form-item>
            </a-col>
            <a-col v-if="['AMAZON', 'WALMART'].includes(formState.addressType as string)" :span="12">
              <a-form-item label="仓库代码" name="warehouseCode" :rules="[{ required: true, message: '请填写仓库代码!' }]">
                <a-input v-model:value="formState.warehouseCode" placeholder="请填写仓库代码" @keydow="validateZhInputHandle($event, formState, ['warehouseCode'])" :maxlength="20"></a-input>
                <a-button type="link" @click="chooseWarehouseHandle">选择仓库</a-button>
              </a-form-item>
            </a-col>
            <a-col v-if="['AMAZON', 'WALMART'].includes(formState.addressType as string)" :span="12">
              <a-form-item label="收件人" name="receiverName" :rules="[{ required: false, message: '请填写收件人!' }]">
                <a-input v-model:value="formState.receiverName" placeholder="请填写收件人" :maxlength="50"></a-input>
              </a-form-item>
            </a-col>
            <a-col v-else :span="12">
              <a-form-item label="收件人" name="receiverName" :rules="[{ required: false, message: '请填写收件人!' }]">
                <a-input v-model:value="formState.receiverName" placeholder="请填写收件人" :maxlength="50"></a-input>
                <a-button type="link" @click="chooseAddressHandle">选择非FBA地址</a-button>
              </a-form-item>
            </a-col>
            <a-col v-if="['PERSONALWAR'].includes(formState.addressType as string)" :span="12">
              <a-form-item label="电话" name="receiverPhone" :rules="[{ required: false, message: '请填写电话!' }]">
                <a-input v-model:value="formState.receiverPhone" placeholder="请填写电话" @keydow="validateZhInputHandle($event, formState, ['receiverPhone'])" :maxlength="20"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="城市" name="city" :rules="[{ required: true, message: '请填写城市!' }]">
                <a-input v-model:value="formState.city" placeholder="请填写城市" :maxlength="50"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="州" name="state" :rules="[{ required: false, message: '请填写州!' }]">
                <a-input v-model:value="formState.state" placeholder="请填写州" :maxlength="50"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="公司" name="receiverCompany" :rules="[{ required: false, message: '请填写公司!' }]">
                <a-input v-model:value="formState.receiverCompany" placeholder="请填写公司" :maxlength="100"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="地址详情" name="address" :rules="[{ required: true, message: '请填写地址详情!' }]">
                <a-textarea v-model:value="formState.address" placeholder="请填写地址详情" show-count :maxlength="200" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="发票备注" name="invoicementRemark" :rules="[{ required: false, message: '请填写发票备注!' }]">
                <a-textarea v-model:value="formState.invoicementRemark" placeholder="请填写发票备注" show-count :maxlength="200" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div class="declaration-info">
          <div class="title">报关信息</div>
          <a-row :guuter="16">
            <a-col :span="24">
              <a-form-item label="VAT税号" name="vatTaxNumber" :rules="[{ required: false, message: '请填写VAT税号!' }]">
                <a-input v-model:value="formState.vatTaxNumber" placeholder="请填写VAT税号" @keydow="validateZhInputHandle($event, formState, ['vatTaxNumber'])" :maxlength="20"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="报关方式" name="customsDeclarationType" :rules="[{ required: true, message: '请选择报关方式!' }]">
                <a-radio-group v-model:value="formState.customsDeclarationType" name="radioGroup">
                  <a-radio v-for="(item, index) in waybillInfo.declarationTypeList" :key="index" :value="item.code">{{ item.name }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="交税方式" name="customsTaxesType" :rules="[{ required: true, message: '请选择交税方式!' }]">
                <a-radio-group v-model:value="formState.customsTaxesType" name="radioGroup">
                  <a-radio v-for="(item, index) in waybillInfo.taxesTypeList" :key="index" :value="item.code">{{ item.name }}</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div class="box-info">
        <div class="title">
          <span>装箱信息</span>
          <span>
            <span>申报币种: {{ formState.channelCurrency || "-" }}</span>
            <span>总申报价值：{{ formState.declaredValue || "0" }}</span>
          </span>
        </div>
        <div class="xlsx-wrapper">
          <label for="#"><span style="color: red">*</span>材质</label>
          <a-checkbox-group v-model:value="formState.materialQualityId" style="width: 100%">
            <a-checkbox v-for="item in materialOpts" :key="item.id" :value="item.id">{{ item.material }}</a-checkbox>
          </a-checkbox-group>
          <XlsxTable :columns="xlsxColumn" :colWidths="colWidths" :table-data="formState.preOrderShipmentBox" :config="{ height: '300px', ...conifg }"></XlsxTable>
        </div>
      </div>
    </a-spin>
    <div class="operation-btn-wrapper">
      <!-- <a-button type="primary" @click="saveDraftHandle">保存草稿</a-button> -->
      <a-button v-debounce type="primary" @click="submitHandle">提交发票</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </div>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import ImportInvoice from "../importInvoice/index.vue";
import ChooseWarehouse from "../chooseWarehouse/index.vue";
import ChooseAddress from "../chooseAddress/index.vue";
export default {
  components: {
    ImportInvoice,
    ChooseWarehouse,
    ChooseAddress
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import CommonHook from "@/hook/commonHook";
import { baseFormCloumn, xlsxColumn, colWidths } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientWaybillManagement.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", v: boolean): void;
  (e: "submit"): void;
}>();
const { dataDict } = CommonHook();
const { passData, visible } = toRefs(props);
const { formDataRef, formState, loading, waybillInfo, materialOpts, init, dialogOpts, drawerOpts, conifg } = InitHook();
const { submitHandle, validateZhInputHandle, dialogSubmitHandle, importInvoiceHandle, chooseWarehouseHandle, drawerSubmitHandle, resetHandle, chooseAddressHandle, changeAddressTypeHandle } =
  OperationHook({
    passData,
    formDataRef,
    formState,
    loading,
    dialogOpts,
    waybillInfo,
    drawerOpts,
    emit
  });
init(passData.value.id);

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init(passData.value.id);
  }
);
</script>
<style lang="stylus" scoped>
.make-invoice{
    padding-bottom: 62px;
    .title{
        font-weight: 600;
        font-size: 14px;
        padding: 12px 0;
    }
    .header{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding: 12px 12px 24px 12px;
    }
    .tbody{
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        .declaration-info,.address-info {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0px 0px 4px 0px #ccc;
            font-weight: 600;
            padding: 0 12px;
        }
        .declaration-info{
            width: 34%;
        }
        .address-info{
            width: 65%;
        }
    }
    .box-info{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0px 0px 4px 0px #ccc;
        font-weight: 600;
        padding: 12px;
        margin-top: 12px;
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            >span:nth-child(2){
                color: #fe8b39;
                >span:nth-child(1){
                    margin-right: 8px;
                }
            }
        }
    }
    .operation-btn-wrapper{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        background-color: #fff;
        z-index: 9999;
        :deep(.ant-btn){
            margin-right: 16px;
        }
    }
}
</style>
